import React, { Component } from 'react'

import Item from '../TodoItem'

import style from './index.module.css'

export default class TodoList extends Component {
  handleChange = (item) => {
    const { data } = this.props;
    const newData = data.map(it => it.id === item.id ? item : it);
    this.props.handleChange(newData);
  }

  render() {
    const { data } = this.props;

    return (
      <div className={style.list}>
        {
          data.map(it => <Item {...it} key={it.id} handleChange={this.handleChange} />)
        }
      </div>
    )
  }
}
